<template>
    <div class="goodsItem">
      <div class="left">
        <div class="name">{{goods.name}}</div>

        <div class="size">{{goods.size}}</div>
      </div>
      <div class="right">
        <CartControl :goods="goods"></CartControl>
        <div class="price">￥{{goods.price}}</div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
import CartControl from '@share/cartControl/CartControl'
import Vue from 'vue'

export default {
  props: {
    goods: Object,
    index: [String, Number]
  },
  data () {
    return {

    }
  },
  components: {
    CartControl
  },
  methods: {
    addFirst (event) {
      if (!event._constructed) {
        return
      }
      this.$emit('cartAdd', event.target)
      Vue.set(this.goods, 'count', 1)
    }
  }
}
</script>

<style lang="less">
  .goodsItem {
    display: flex;
    background: #fff;
    border: 1px solid #f7f7f7;
    &:hover {
      position: relative;
      border-color: #6AA7E3;
      &:before {
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        width: 5px;
        height: 30px;
        background-color: #6AA7E3;
       }
     }
    .left {
      flex: 1;
      padding: 10px;
      .name {
        font-size: 16px;
        color: #333333;
        padding: 6px 0;
        height: 44px;
      }
      .size {
        font-size: 10px;
        color: #D05656;
      }
    }
    .right {
      position: relative;
      flex: 0 0 150px;
      text-align: right;
      padding: 10px;
      .price {
        position: absolute;
        bottom: 10px;
        right: 15px;
        font-size: 10px;
        color: #333333;
      }
    }
  }
</style>
